<template>
  <div class="main-right">
    <!-- 黏性定位 -->
    <div class="main-right-panel">
      <div>
        <!-- 个人信息开始 -->
        <el-popover placement="bottom" width="300" trigger="click">
          <div class="p_info" slot="reference">
            <div class="p_info_panel">
              <div>
                <router-link to="/Personal"
                  ><img :src="userHeaderImg" alt=""
                /></router-link>
              </div>
              <div class="p_info_tip">
                <div class="name_banner">
                  <div class="name">{{ nickname }}</div>
                  <!-- 用户认证 -->
                  <div v-if="auth_id == 1" :title="$t('postlist.auth_personal')" class="auth personal">
                    <svg
                      viewBox="0 0 22 22"
                    >
                      <g>
                        <path
                          d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div v-if="auth_id == 2" :title="$t('postlist.auth_orgnaztion')" class="auth organizaion">
                    <svg
                      viewBox="0 0 22 22"
                    >
                      <g>
                        <path
                          d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <!-- 用户认证结束 -->
                </div>
                <div class="acc">@{{ account }}</div>
              </div>
            </div>
            <div class="more" :title="$t('index.more')">
              <svg
                viewBox="0 0 24 24"
                aria-hidden="true"
                class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"
              >
                <g>
                  <path
                    d="M3 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9 2c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
                  ></path>
                </g>
              </svg>
            </div>
          </div>
          <div class="p_info_pop">
            <!-- 点击弹出窗口 -->
            <div @click="logout">{{ $t("user.logout") }}</div>
          </div>
        </el-popover>
        <!-- 个人信息开始 -->
        <!-- 搜索功能 -->
        <div class="u_search_panel">
          <div class="search">
            <el-input
              :placeholder="$t('index.searchinput')"
              v-model="searchForm.query"
              @keyup.enter.native="userSearchPostByKeyword"
              class="u-search"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
        </div>
        <!-- 热搜 热点-->
        <HotList />
        <!-- 信息 -->
        <SiteInfo />
      </div>
    </div>
  </div>
</template>
<script>
import HotList from "@/components/HotList.vue";
import SiteInfo from "@/components/SiteInfo.vue";

export default {
  name: "MainRight",
  components: {
    HotList,
    SiteInfo,
  },
  data() {
    return {
      user_id: JSON.parse(localStorage.getItem("user")).user_id
        ? JSON.parse(localStorage.getItem("user")).user_id
        : 1,
      auth_id: JSON.parse(localStorage.getItem("user")).auth_id
        ? JSON.parse(localStorage.getItem("user")).auth_id
        : 0,
      userHeaderImg: JSON.parse(localStorage.getItem("user")).user_headimg
        ? JSON.parse(localStorage.getItem("user")).user_headimg
        : require("@/assets/img/user.png"),
      nickname: JSON.parse(localStorage.getItem("user")).user_nickname,
      account: JSON.parse(localStorage.getItem("user")).username,
      searchForm: {
        query: "",
      },
    };
  },
  mounted() {},
  methods: {
    //注销登录
    logout() {
      // 清除状态保持
      window.localStorage.clear();
      // 状态保持清除后刷新页面
      window.location.reload();
    },
    async userSearchPostByKeyword() {
      if (this.searchForm.query.trim() == "") {
        return;
      }
      //跳转到搜索页面并将搜索关键字传过去
      this.$router.push("/Search?q=" + this.searchForm.query);
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 内容右侧样式 */
.main-right {
  width: 365px;
  background-color: #ffffff;
  border-radius: 5px;
  /* 这里不能使用overflow:hidden;隐藏圆角，该属性与sticky冲突，父元素及以上不能出现 */
}

.main-right-panel {
  /* 黏性定位 */
  position: sticky !important;
  top: 0;
  background-color: #ffffff;
  z-index: 30;
  border-radius: 5px;
  padding: 5px;
}

.p_info {
  display: flex;
  justify-content: space-between;
  padding: 10px 18px;
  /* border: 1px solid rgb(239, 243, 244); */
  margin-bottom: 20px;
}
.p_info_panel {
  display: flex;
}

.p_info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.p_info_tip {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
}

.name_banner {
  display: flex;
}

.p_info_tip .name {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  line-height: 22px;
}

.auth {
  width: 20px;
  height: 20px;
  fill: rgba(29, 155, 240, 0);
  cursor: pointer;
  margin-right: 5px;
}

.personal {
  fill: rgba(29, 155, 240, 1);
}

.organizaion {
  fill: rgba(255, 215, 0, 1);
}

.p_info_tip .acc {
  font-size: 14px;
  color: rgb(83, 100, 113);
  flex: 1;
}

.p_info .more {
  color: rgba(15, 20, 25, 1);
}

.p_info:hover {
  background-color: rgb(239, 243, 244);
  border-radius: 44px;
  cursor: pointer;
}

.p_info .more svg {
  width: 1.25rem;
  height: 33px;
}

/* 个人信息点击弹出 */
.p_info_pop {
  padding: 8px 16px;
  font-size: 15px;
  font-weight: bold;
  color: rgba(15, 20, 25, 1);
}

.p_info_pop:hover {
  background-color: rgb(239, 243, 244);
  border-radius: 15px;
  cursor: pointer;
}

/* 快速搜索框 */
.u_search_panel {
  display: flex;
  margin-bottom: 20px;
}

.u_search_panel .search {
  flex: 1;
}
</style>
<style>
/* 覆盖样式 */
.u-search input {
  border-radius: 20px;
}
</style>